<script setup lang="ts">

import {ElementPlus} from "@element-plus/icons-vue";
import SvgIcon from "../utils/SvgIcon.vue";
import {userStore} from "../../store";
import {storeToRefs} from "pinia";

const menuList = [
    {
        name: 'home',
        title: '首页',
        path: '/',
        icon: 'home',
        children: []
    }, {
        name: 'serial',
        title: '串口调试助手',
        icon: 'serial',
        path: '/serial',
        children: [
            {name: 'text', title: '文本模式', path: '/text', icon: 'text'},
            {name: 'curve', title: '曲线模式', path: '/curve', icon: 'curve'},
        ]
    }, {
        name: 'network',
        title: '网络调试助手',
        icon: 'network',
        path: '/network',
        children: [
            {name: 'tcpServer', title: 'TCP服务器', path: '/tcpServer', icon: 'tcpServer'},
            {name: 'tcpClient.svg', title: 'TCP客户端', path: '/tcpClient', icon: 'tcpClient'},
            {name: 'udp', title: 'UDP', path: '/udp', icon: 'udp'},
        ]
    }, {
        name: 'game',
        title: '游戏',
        icon: 'game',
        path: '/game',
        children: [
            {name: 'snake', title: '贪吃蛇', path: '/snake', icon: 'dragon'},
            {name: '2048', title: '2048', path: '/2048', icon: '2048'},
        ]
    }, {
        name: 'note',
        icon: 'notebook',
        title: '学习笔记',
        path: '/notebook',
        children: []
    }, {
        name: 'about',
        icon: 'about',
        title: '关于',
        path: '/about',
        children: []
    }
]


const store = userStore()
const isCollapse = storeToRefs(store).expand
</script>

<template>
    <el-menu
        default-active="1"
        :collapse="isCollapse"
    >
        <el-menu-item index="1">
            <el-icon>
                <ElementPlus/>
            </el-icon>
            <template #title>ElementPlus</template>
        </el-menu-item>
    </el-menu>
    <!--  全部的menu值  -->
    <el-scrollbar class="scrollMenu" always>
        <el-menu
            :default-active="$route.path"
            class="el-menu-vertical-demo"
            :collapse="isCollapse"
            :router="true"
        >
            <template v-for="item in menuList" >
                <el-menu-item :index="item.path" :route="{path:item.path}" v-if="item.children.length === 0">
                    <el-icon>
                        <svg-icon :name="item.icon"/>
                    </el-icon>
                    <template #title>{{ item.title }}</template>
                </el-menu-item>
                <el-sub-menu :index="item.path" v-else>
                    <template #title>
                        <el-icon>
                            <svg-icon :name="item.icon" width="16px"/>
                        </el-icon>
                        <span>{{ item.title }}</span>
                    </template>
                    <el-menu-item :index="item.path + child.path" :route="{path:item.path + child.path}" v-for="child in item.children">
                        <el-icon>
                            <svg-icon :name="child.icon" width="16px"/>
                        </el-icon>
                        <template #title>{{ child.title }}</template>
                    </el-menu-item>
                </el-sub-menu>
            </template>
        </el-menu>
    </el-scrollbar>
</template>

<style scoped>
.el-menu {
    border-right: none !important;
}

.scrollMenu {
    height: calc(100% - 56px);
}
</style>